#homePage {
  @import "home_ty";
  @import "home_swiper";

  .icons {
    display: flex;
    margin-top: .6rem;
    align-items: space-around;

    justify-content: space-evenly;

    * {
      transition: all 0.3s;
    }

    .text {
      font-size: .2rem;

      margin-top: .1rem;
      text-align: center;
    }

    .icons-item {
      &:hover {
        .text {
          color: $mc1;
        }

        .icon {

          background: $mc1;

          .iconfont {
            color: #fff;
          }
        }
      }


    }


  }

  .iconfont {
    color: $mc1;
    font-size: .5rem;
  }

  .icon {
    width: 1.1rem;
    height: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 50%;
    margin: auto;
  }

  .banner {
    aspect-ratio: 16 / 9;

    // height: calc(100vh - 1.4rem);
    img {
      width: 100%;
      height: 100%;
    }
  }

  .box_01 {
    background: #fff;
    padding: .6rem .2rem;
    overflow: hidden;
    height: 8.5rem;

    .bd {
      gap: .25rem;
    }

    .box_02_02 {
      flex: 1;
    }

    .ty-hd-01 {
      width: 50%;
    }
  }

  .box_02 {
    padding-top: .6rem;
    padding-bottom: .6rem;
    background: #F8FCFF;
    background: url(/static/img/bg2.png);
    border-radius: .06rem;

    .ty-hd-01 {
      margin-bottom: .4rem;
    }

    &_01 {
      margin-top: .2rem;
      flex: 1;
      padding: 0 .2rem;
    }

    &_02 {
      width: 2.8rem;

      .hd {
        font-size: .22rem;
        margin-top: -0.12rem;
        background: url(/上海市测绘地理信息学会/static/img/kslj_hd.png) no-repeat 100%;
        background-size: cover;
        height: .7rem;
        color: #fff;
        text-align: center;
        padding-top: .05rem;
        font-weight: bold;
      }

      .bd {
        ul {
          flex-wrap: wrap;
          justify-content: center;
          gap: .1rem;
        }

        li {
          width: 1.16rem;
          height: 1.16rem;
          text-align: center;
          padding: .15rem 0;
          background: url(/上海市测绘地理信息学会/static/img/kslj_bg.png);
          background-size: contain;

          a:hover {
            color: $mc1;
          }

          picture {
            display: flex;
            width: .4rem;
            height: .4rem;
            margin: 0 auto;
            margin-bottom: .1rem;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }

  .box_03 {
    min-height: 8.4rem;
    padding: .6rem .2rem;
    background: url(/static/img/jydt-bg.png) no-repeat 100%;
    background-size: cover;

    .item {
      width: 3.55rem;
      height: 1.47rem;
      margin-bottom: .3rem;
      background-color: #b73736;
      box-shadow: 0 .04rem .15rem .01rem rgba(3, 0, 0, 0.08);
      border-radius: .5rem 0 .5rem 0;
    }
  }

  .m-xysh {
    min-height: 8.4rem;
    padding: .6rem .2rem;
    background: url(/static/img/xysh-bg.png) no-repeat 100%;
    background-size: cover;
    overflow: hidden;

    .left {
      width: 7.8rem;
      height: 6.2rem;
      overflow: hidden;
    }

    .right {
      @import 'home_tabs';
    }
  }

  .m-ztlm {
    min-height: 9.13rem;
    padding: .6rem .2rem;
    background: url(/static/img/ztlm-bg.png) no-repeat 100%;
    background-size: cover;

    .ty-hd-01 {
      text-align: center;

      .hd-1 {
        display: block;
        float: none;

      }
    }

    .swiper-container {
      max-width: 16rem;
      padding: .4rem 0rem;
    }

    .swiper-slide {
      transition: all 0.6s;
    }

    .swiper-slide-prev {}

    .swiper-slide-active {
      transform: scale(1.2);
      z-index: 99;
    }

    .swiper-button-next,
    .swiper-button-prev {
      color: $mc1;

    }

    .swiper-slide-prev,
    .swiper-slide-next {
      background: $mc1;

      img {
        // display: none;
      }
    }

    .swiper-slide {
      width: 6.7rem;
      height: 3.7rem;

      img {
        width: 100%;
        height: 100%;
      }
    }


  }

  .box_04 {
    display: flex;

    .container {
      position: relative;
    }

    .item {
      display: block;
      position: relative;
      width: 50%;
      max-height: 3.1rem;
      aspect-ratio: 1 / 1;
      color: #fff;
      overflow: hidden;

      .item-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .item-content {
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 99;
        font-size: .3rem;
        gap: .2rem;
      }

      &1,
      &2 {
        width: 100%;
        height: 100%;
      }

      &2 {
        color: $mc1;
      }

      &3,
      &4 {
        display: flex;
        height: 100%;
        max-height: 3.1rem;

        .left {
          position: relative;
          width: 50%;

          .item-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .right {
          width: 50%;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .ty-hd-01 {
    position: relative;
    display: block;
    width: 100%;
    color: #fff;
    height: 1.4rem;
    line-height: 1.4rem;
    text-align: center;
    margin-bottom: .35rem;

    .hd-1 {
      float: left;
      color: $mc1;
      font-size: .36rem;
      font-weight: bold;
      gap: .1rem;
      display: flex;

      img {
        width: 1.67rem;
      }

      &:hover {
        color: $mc1;
      }
    }

    .hd-more {
      color: $mc1;
      height: 100%;
      right: .2rem;
      top: 0;
      position: absolute;
      font-size: .14rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;

      &:hover {
        transform: scale(1.2);
      }

      i {
        margin-left: .04rem;
        display: inline-block;
        transform: translateY(-0.01rem);
      }
    }
  }

  .m-xinwen_list1 {
    .xinwen_list_item {
      .desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: .2rem;
        font-size: .14rem;
        color: #999;
      }
    }
  }

  .m-xinwen_list1 {
    .xinwen_list_item {
      display: flex;
      align-items: center;
      height: 1.2rem;
      overflow: hidden;
      padding: 0 .1rem;
      border-bottom: .01rem solid #E6E5E5;
      background: transparent;
      transition: all 0.3s;

      .text {
        flex: 1;
        min-width: 0;
      }

      * {
        transition: all 0.3s;
      }

      &.on {
        background: $mc1;
        height: 1.8rem;
        background-color: #b93c3b;
        border-radius: .5rem 0 .5rem 0;

        * {
          color: #fff !important;
        }
      }
    }

    .date {
      flex: 0 0 .8rem;
      height: 1.08rem;
      display: flex;
      text-align: center;
      align-content: center;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-right: .2rem;

      .d {
        font-size: .36rem;
        color: $mc1;
      }

      .ym {
        font-size: .16rem;
        color: $mc1;
      }
    }

    .title {
      font-size: .18rem;
      margin-top: .16rem;
      margin-bottom: .1rem;
      color: #333;
    }

    .desc {
      line-height: .2rem;
      height: (2*.2rem);
      overflow: hidden;
      font-size: .14rem;
      color: #999;
    }

    .more {
      color: $mc1;
    }
  }

  .m-xinwen_list1-1 {
    .xinwen_list_item {
      display: flex;
      align-items: center;
      height: 1rem;
      overflow: hidden;
      padding: 0 .1rem;
      background: #fff;
      transition: all 0.3s;
      border-radius: .5rem 0 .5rem 0;
      margin-bottom: .2rem;

      .text {
        flex: 1;
        min-width: 0;
      }

      * {
        transition: all 0.3s;
      }

      &:hover {
        background: $mc1;
        background-color: #b93c3b;

        * {
          color: #fff !important;
        }
      }
    }

    .date {
      flex: 0 0 1.2rem;
      height: .45rem;
      display: flex;
      text-align: center;
      align-content: center;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-right: .2rem;
      border-right: .01rem solid #ddd;

      .d {
        font-size: 0.30rem;
        color: $mc1;
      }

      .ym {
        font-size: .16rem;
        color: $mc1;
      }
    }

    .title {
      font-size: .2rem;
      margin-top: .16rem;
      margin-bottom: .1rem;
      color: #333;
    }

    .desc {
      line-height: .2rem;
      height: (2*.2rem);
      overflow: hidden;
      font-size: .14rem;
      color: #999;
    }

    .more {
      color: $mc1;
    }
  }

  .m-xinwen_list1-2 {
    .item {
      display: block;
      width: 100%;
      height: 1.47rem;
      overflow: hidden;
      padding: .2rem;
      background: #fff;
      transition: all 0.3s;
      border-radius: .5rem 0 .5rem 0;
      margin-bottom: .3rem;
      padding-top: .3rem;
      .title {
        font-size: .2rem;
        margin-bottom: .1rem;
        color: #111;
      }

      .date {
        font-size: .16rem;
        margin-top: .1rem;
        color: #999;
      }

      &:hover {
        background: $mc1;

        * {
          color: #fff !important;
        }
      }
    }
  }

  .m-xinwen_list1-3 {
    .item {
      display: block;
      height: 1.85rem;
      overflow: hidden;
      padding: .2rem;
      transition: all 0.3s;
      // border-radius: .5rem 0 .5rem 0;
      border-bottom: .01rem solid #ddd;

      .pic {
        float: right;
        width: 2.5rem;
        height: 1.45rem;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .title {
        font-size: .2rem;
        margin-bottom: .1rem;
        color: #111;
      }

      .date {
        font-size: .16rem;
        margin-top: .1rem;
        color: #999;
      }

      .desc {
        font-size: .14rem;
      }

      &:hover {
        background: $mc1;

        * {
          color: #fff !important;
        }
      }
    }
  }



  .m-links {
    margin-top: .2rem;
    margin-bottom: .2rem;
    overflow: hidden;

    .hd {
      margin-bottom: .2rem;
    }

    .btn-default {
      width: 80%;
      background: #EFEFEF;
      border: 0;
      border-radius: 0;
    }

    .btn {
      text-align: left;
    }

    .caret {
      float: right;
      margin-top: .1rem;
    }

    a {
      margin-left: .15rem;
      background: #F0F0F0;
      padding: 0 .3rem;
      height: .4rem;
      line-height: .4rem;
      margin-bottom: .2rem;
      float: left;

      &:hover {
        color: $mc1;
      }
    }

    .hd {
      float: left;
      height: .4rem;
      line-height: .4rem;
      font-weight: bold;
      font-family: -webkit-pictograph;
      font-size: .3rem;
      color: $mc1;
      padding-left: .2rem;
    }

    .bd {
      float: left;
    }
  }


}